<script setup lang='ts'>
import { ref } from 'vue'
const showAvatar = ref(true)

enum SizeEnum {
    S = "s",
    M = "m",
    L = "l",
    XL = "xl",
    XXL = "xxl"
}
// 定义一个变量 尺寸的变量
const sizeData = ref<SizeEnum>(SizeEnum.S) // 尺寸的数据

const changeSize = () => {
    if (sizeData.value === SizeEnum.S) {
        sizeData.value = SizeEnum.M
    } else if (sizeData.value === SizeEnum.M) {
        sizeData.value = SizeEnum.L
    } else if (sizeData.value === SizeEnum.L) {
        sizeData.value = SizeEnum.XL
    } else if (sizeData.value === SizeEnum.XL) {
        sizeData.value = SizeEnum.XXL
    } else {
        sizeData.value = SizeEnum.S
    }
}

</script>

<template>
    <div class="container">
        <h1>测试条件渲染v-show</h1>
        <!-- <img v-show="showAvatar" class="avatar"
            src="https://img2.baidu.com/it/u=4136404846,3323025248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1084" alt=""> -->
        <!-- if会销毁组件，show不会销毁组件只会隐藏组件 -->
        <img v-if="showAvatar" class="avatar"
            src="https://img2.baidu.com/it/u=4136404846,3323025248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1084" alt="">
        <button @click="showAvatar = !showAvatar">显示或隐藏头像</button>
        <p>
        <h1>v-if和v-else-if和v-else</h1>
        </p>
        <p>
        <h2 v-if="sizeData === SizeEnum.S">小孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.M">大孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.L">青年的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XL">正常的尺码</h2>
        <h2 v-else>微胖的尺码</h2>
        </p>
        <p>
            <button @click="changeSize">改变尺码</button>
        </p>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>